<!DOCTYPE html>
<html>
<head>
<title>涛宝商城-更新商品</title>
<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/mdui.min.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/github-gist.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/railscasts.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/docs.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/bootstrap.min.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/bootstrap-table.min.css}" />
		
		<script th:src="@{appstyle/js/jquery-1.12.4.js}" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" th:src="@{appstyle/js/mdui.min.js}"></script>
		<script th:src="@{appstyle/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{appstyle/js/bootstrap-table.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{appstyle/js/bootstrap-table-zh-CN.min.js}" type="text/javascript" charset="utf-8"></script>
		
		<script th:src="@{appstyle/js/vue.js}" type="text/javascript" charset="utf-8"></script>
		
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/summernote.css}"/>
		<script th:src="@{appstyle/js/summernote.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{appstyle/js/summernote-zh-CN.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="mdui-panel" mdui-panel>
<div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">更新商品信息</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
    <input id="productId" type="hidden" th:value="@{${session?.product_msg?.list[0].id}}">
      <p>
      所属分类:
    <select  id="parent_category">
			<option value="0">选择您的分类</option>
	</select>  
	<select id="product_category">
			<option value="1">根据商品id查询</option>
	</select>  
      </p>
      <p>
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">商品名称(标题)</label>
  <input id="product_name" class="mdui-textfield-input" type="text" th:value="@{${session?.product_msg?.list[0].name}}" />
</div>
</p>
      <p>
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">商品副标题</label>
  <input id="product_subtitle" class="mdui-textfield-input" type="text" th:value="@{${session?.product_msg?.list[0].subtitle}}" />
</div>
</p>
      <p>
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">商品单价</label>
  <input id="product_price" class="mdui-textfield-input" type="text" th:value="@{${session?.product_msg?.list[0].price}}" />
</div>
</p>
      <p>
      <div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">商品库存</label>
  <input id="product_stock" class="mdui-textfield-input" type="text" th:value="@{${session?.product_msg?.list[0].price}}" />
</div></p>
      <p>
      <h1>商品详情</h1>
<div style="margin-left: 20%;width: 500px;height: 200px;">
		       <div id="summernote" th:utext="@{${session?.product_msg?.list[0].detail}}"></div>
		       <script>
		     
		       </script>
		    </div>
		    <br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
<script>
		    $(document).ready(function() {
		        //jquery创建一个summernote实例
		        var summernoteImgList = "";
		        $('#summernote').summernote({
		             //功能图标改为中文
		             lang: 'zh-CN',
		             //预设内容
		             placeholder: '请在此输入内容...',
		             height: 300,
		             width:800,
		             //回调函数
		             callbacks: {
		                   //初始化
		                  onInit: function() {
		                      //init
		                  },
		                  //焦点
		                  onFocus: function() {
		                      //focus
		                  },
		                  //图片文件上传
		                  onImageUpload: function(files, editor, $editable) {
		                      data = new FormData();  
		                      data.append("pic", files[0]);  
		                    $.ajax({  
		                        data : data,  
		                        type : "POST",  
		                        url : "fileupload",   
		                        cache : false,  
		                        contentType : false,  
		                        processData : false,  
		                        dataType : "text",  
		                        success: function(data) {  
		                            //[服务器所在文件所在目录位置]一般为"http://119.23.216.181/RoboBlogs/Upload_File/default_show.png"
		                            $('#summernote').summernote('insertImage', "http://49.232.168.42/"+data);
		                            summernoteImgList = summernoteImgList + "http://49.232.168.42/"+data + ",";
		                        },  
		                        error:function(){  
		                            alert("上传失败");  
		                        }  
		                    });  
		                  }
		                }
		             
		        });
		        
		        initCategoryMsg();
		        function initCategoryMsg(){
					$.ajax({
						  url:"manage/category/listCategoryByParentId.do",
						  Type:"post",
						  data:"parent_id=0",
						  dataType:"json",
						  success:function(data){
							  $("#parent_category").empty();
							  for(var i=0;i<data.data.length;i++){
								  $("#parent_category").append("<option value="+data.data[i].id+">"+data.data[i].name+"</option>");
							  }
						  }
					  })
				}
		        $("#parent_category").change(function(){
					$.ajax({
						  url:"manage/category/listCategoryByParentId.do",
						  Type:"post",
						  data:"parent_id="+$(this).children('option:selected').val(),
						  dataType:"json",
						  success:function(data){
							  $("#product_category").empty();
							  if(data.status==1){
								  $("#product_category").append("<option value='0'>没有找到对应数据,换个试试吧!</option>");
							  }
							  for(var i=0;i<data.data.length;i++){
								  $("#product_category").append("<option value="+data.data[i].id+">"+data.data[i].name+"</option>");
							  }
							  alert($("#product_category").html());
						  }
					  })
				})
		    }); 
		  </script>
      <div class="mdui-panel-item-actions">
        <button id="cancel_Btn" class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button id="save_Btn" class="mdui-btn mdui-ripple" mdui-tooltip="{content: '提交记录'}">save</button>
      </div>
    </div>
    </div>
  </div>
  <script>
  // 提交表单
  $("#save_Btn").click(function(){
  	var categoryId = $("#product_category").val();
  	// 如果分类不合法则获取根节点
  	if($("#product_category").val()<10000){
  		categoryId = $("#parent_category").val();
  	}
       var detailHtml=$("#summernote").summernote("code");
       $.ajax({
      	 url:"manage/product/save_product.do",
      	 Type:"post",
      	 data:{
      		 name:$("#product_name").val(),
      		categoryId:categoryId,
   		     subtitle:$("#product_subtitle").val(),
   		     price:$("#product_price").val(),
      		 id:$("#productId").val(),
      		 detail:detailHtml,
      	 },
      	 dataType:"json",
      	 success:function(data){
      		 alert(data.msg);
      		 if(data.status==0){
      			 location.href="admin.html";
      		 }
      	 }
       })
  });
  </script>
</body>
</html>